<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>今日待办</h1>
    <input type="text" name="" id="">
    <button>发布</button>
    <ul>
        <!-- 
        <li>
            <p>今天有三个作业</p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        var arr = [
            { id: 1, title: '今天有业' },
            { id: 2, title: '今天晚上要xx吃饭' },
            { id: 3, title: '晚上睡觉之前xx' },
            { id: 4, title: '今天有三个作业' },
        ]
        // 1- arr中数据显示到ul中
        // 2- 给删除按钮添加点击事件--事件委托--点击删除按钮的时候
        // 删除数据中对应的一个元素

        // 3-添加功能
        //  实际上 向arr中添加给一个 对象{id:数组中id的最大值加，title：输入框}
        //  重新加载列表

        // 1- arr中数据显示到ul中
        //  循环遍历 arr中每一个元素，对象--根据这个对象 拼接一个 liStr 字符串
        // var str = '';
        // arr.forEach(function (obj) {
        //     // 给按钮 添加了一个自定义属性
        //     var liStr = `<li>
        //                     <p>${obj.title}</p>
        //                     <button class="del" data-id="${obj.id}">删除</button>
        //                 </li>`;
        //     // console.log(liStr);
        //     str += liStr
        // });
        // console.log(str);
        // // 获取 ul  str赋值ul.innerHTML 
        // var ul = document.querySelector('ul')
        // ul.innerHTML = str;
        loadList();

        var ul = document.querySelector('ul')

        // 2- 给删除按钮添加点击事件--事件委托--点击删除按钮的时候
        // 删除数据中对应的一个元素-- 数组
        ul.onclick = function (evt) {
            if (evt.target.className == 'del') {
                console.log('点击了删除按钮');

                // 删除数组中一个元素
                console.log(arr);
                console.log(evt.target);
                // 获取自定义属性
                console.log(evt.target.dataset.id);
                console.log(evt.target.getAttribute('data-id'));

                // id 每一条 待办事项有都自己唯一的id
                var id = evt.target.dataset.id
                console.log(id);
                // 删除数组中 元素的id  和 变量id值相等的 数据

                // ----删除任意位置 先找下标，在splice
                // // 根据条件找元素的下标（变量id和元素的id属性一样）
                // var i = arr.findIndex(function (v) {
                //     return v.id == id;
                // });
                // console.log(i, '要删除元素的下标');
                // //  --根据下标删除元素splice(下标,1)
                // arr.splice(i, 1)
                // console.log(arr);

                // --- 删除 过滤想要的，删除了不想要的 (元素的id 和变量的id不等)
                // filter 不改变元素数组
                // 返回的过滤出来的新数组
                // 用返回值替换原数组
                // 
                arr = arr.filter(function (v) {
                    return v.id != id;
                });
                // console.log(resArr);
                console.log(arr);


                // ----页面中的 li 也得删除
                //1---- 删除 按钮的父元素
                // evt.target.parentNode.remove()

                // 2----种方法
                // 重新 根据 arr 遍历 生成 多个li  替换ul里面内容
                loadList()





            }
        }


        // 根据arr 生成 li字符串 -覆盖ul中内容
        // 重新加载列表
        function loadList() {
            var str = '';
            arr.forEach(function (obj) {
                // 给按钮 添加了一个自定义属性
                var liStr = `<li>
                        <p>${obj.title}</p>
                        <button class="del" data-id="${obj.id}">删除</button>
                    </li>`;
                // console.log(liStr);
                str += liStr

            });
            console.log(str);
            // 获取 ul  str赋值ul.innerHTML 
            var ul = document.querySelector('ul')
            ul.innerHTML = str;
        }
    </script>

</body>

</html>